<template>
  <div class="app-container">
    <el-form :model="searchForm" :inline="true">
      <el-row>
        <el-col :span="20">
          <el-form-item prop="fuzzy">
            <el-input
              v-model="searchForm.fuzzy"
              style="width: 250px"
              placeholder="仪器名称/仪器编号/仪器名称"
            />
          </el-form-item>
          <el-form-item prop="type" label="仪器类别">
            <el-select
              v-model="searchForm.type"
              style="width: 145px"
              placeholder="请选择仪器类别"
              clearable
            >
              <el-option
                v-for="item in typleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="classType" label="检测类别">
            <el-select
              v-model="searchForm.classType"
              style="width: 145px"
              placeholder="请选择检测类别"
              clearable
            >
              <el-option
                v-for="item in classTypeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              class="iconfont icon-chaxun1"
              size="small"
              @click="handleSearch"
            >
              查询</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <el-table
        ref="stockTable"
        stripe
        border
        :data="tableData"
        class="table-item"
        highlight-current-row
        :header-cell-style="{ background: '#ECF3FC' }"
        style="width: 100%"
      >
        <template slot="empty">
          <div class="table_empty">
            <div class="empty_tips">
              <span> 暂无数据 </span>
            </div>
          </div>
        </template>
        <el-table-column type="index" width="70" align="center" label="序号" />
        <el-table-column prop="name" label="仪器名称" align="center" />
        <el-table-column prop="number" label="仪器编号" align="center" />
        <!-- <el-table-column
          prop="model"
          label="仪器型号"
          width="180"
          align="center"
        /> -->
        <el-table-column prop="type" label="仪器类别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.type == '1'">现场采样仪器</span>
            <span v-if="scope.row.type == '2'">现场检测仪器</span>
            <span v-if="scope.row.type == '3'">实验室仪器</span>
            <span v-if="scope.row.type == '4'">校准仪器</span>
            <span v-if="scope.row.type == '5'">样品制备仪器</span>
          </template>
        </el-table-column>
        <el-table-column prop="classType" label="检测类别" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.classType == '1'"> 水</span>
            <span v-if="scope.row.classType == '2'">气</span>
            <span v-if="scope.row.classType == '3'">噪声</span>
            <span v-if="scope.row.classType == '4'"
              >土壤、底泥、固废、污泥和生活垃圾</span
            >
            <span v-if="scope.row.classType == '5'">样品制备</span>
            <span v-if="scope.row.classType == '6'">小型分析仪器</span>
            <span v-if="scope.row.classType == '7'">色谱仪 </span>
            <span v-if="scope.row.classType == '8'">光谱仪</span>
            <span v-if="scope.row.classType == '9'">质谱仪</span>
          </template>
        </el-table-column>
        <el-table-column prop="manufacturer" label="仪器品牌" align="center" />
        <el-table-column prop="model" label="仪器型号" align="center" />
        <el-table-column prop="position" label="放置地点" align="center" />
        <el-table-column fixed="right" align="center" width="180" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="install(scope.row.id)">
              安装验收录入</el-button
            >
            <!-- <div class="erc-divider-vertical" /> -->
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      title="安装验收录入"
      :visible.sync="approveVisible"
      width="60%"
      center
      :tree-props="{ children: 'childList', hasChildren: 'hasChildren' }"
    >
      <div>
        <div class="install-title">安装信息</div>
        <el-form
          ref="installForm"
          :model="installForm"
          :rules="rules"
          label-width="130px"
        >
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item prop="installUser" label="安装人">
                <el-input
                  v-model="installForm.installUser"
                  style="width: 70%"
                  placeholder="请输入安装人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="phone" label="安装人联系方式">
                <el-input
                  v-model="installForm.phone"
                  style="width: 70%"
                  placeholder="请输入安装人联系方式"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="installTime" label="安装调试日期">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.installTime"
                  type="date"
                  placeholder="请选择安装调试日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="annex" label="仪器附件信息">
                <el-input
                  v-model="installForm.annex"
                  style="width: 70%"
                  placeholder="请输入仪器附件信息"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="fileName" label="仪器技术文件名称">
                <el-input
                  v-model="installForm.fileName"
                  style="width: 70%"
                  placeholder="请输入仪器技术文件名称"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <!-- <el-form-item prop="position" label="放置地点">
                <el-input
                  v-model="installForm.position"
                  style="width: 70%"
                  placeholder="请输入放置地点"
                />
              </el-form-item> -->
              <el-form-item prop="position" label="放置地点">
                <treeselect
                  style="width: 70%"
                  v-model="position"
                  :options="deptOptions"
                  :normalizer="normalizer"
                  placeholder="选择放置地点"
                  @select="changeId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="name" label="拆箱及安装照片">
                <el-upload
                  class="upload-demo"
                  action="/api/deviceInstall/fileUpload"
                  accept=".jpg,.jpeg,.png"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :on-success="handleSuccess"
                  :file-list="fileList"
                  :auto-upload="true"
                  name="files"
                  :on-exceed="handleExceed"
                  :limit="limit"
                  list-type="picture"
                  ref="uploadList"
                  :on-change="changeLIst"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                  <div
                    slot="file"
                    slot-scope="{ file }"
                    style="display: inlie-block"
                  >
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <div class="delete" @click="deleteFile(file)">x</div>
                  </div>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="install-title">验收信息</div>
          <el-row :gutter="12">
            <el-col :span="12">
              <el-form-item prop="acceptanceUser" label="验收人">
                <el-input
                  v-model="installForm.acceptanceUser"
                  style="width: 70%"
                  placeholder="请输入验收人"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="acceptanceTime" label="验收日期">
                <el-date-picker
                  style="width: 70%"
                  value-format="yyyy-MM-dd"
                  v-model="installForm.acceptanceTime"
                  type="date"
                  placeholder="请选择验收日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="12">
            <el-col :span="24">
              <el-form-item prop="conclusion" label="验收结论">
                <el-input
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 99 }"
                  placeholder="请输入验收结论"
                  v-model="installForm.conclusion"
                  style="width: 88%"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approveVisible = false">取消</el-button>
        <el-button type="primary" @click="sumitInstall('installForm')"
          >确认</el-button
        >
      </div>
    </el-dialog>
    <div style="float: right">
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="searchForm.pageNumber"
        :limit.sync="searchForm.pageSize"
        @pagination="handleSearch"
      />
    </div>
  </div>
</template>

<script>
import { SUBMIT_STATUS, CLASS_STATUS, TYPE_STATUS } from "./drop";
import * as instrServer from "@/api/instrument";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
export default {
  components: { Pagination, Treeselect },
  filters: {},
  data() {
    return {
      rules: {
        installUser: [
          { required: true, message: "请输入安装人员", trigger: "blur" }
        ],
        installTime: [
          { required: true, message: "请选择安装调试日期", trigger: "blur" }
        ],
        acceptanceUser: [
          { required: true, message: "请输入验收人员", trigger: "blur" }
        ],
        acceptanceTime: [
          { required: true, message: "请选择验收日期", trigger: "blur" }
        ]
      },
      limit: 5,
      dialogImageUrl: "",
      dialogVisible: false,
      disabled: false,
      fileList: [],
      approveVisible: false,
      TYPE_STATUS,
      CLASS_STATUS,
      SUBMIT_STATUS,
      modelList: [],
      isEdit: false,
      installForm: {
        installUser: "",
        installTime: "",
        acceptanceUser: "",
        acceptanceTime: ""
      },
      // 部门树选项
      deptOptions: [],
      total: 0,
      tableData: [],
      deptList: [],
      position: null,
      typleList: [
        {
          name: "现场采仪器",
          id: 1
        },
        {
          name: "现场检测仪器",
          id: 2
        },
        {
          name: "实验室仪器",
          id: 3
        },
        {
          name: "校准仪器",
          id: 4
        },
        {
          name: "样品制备仪器",
          id: 5
        }
      ],
      classTypeList: [
        {
          name: "水",
          id: 1
        },
        {
          name: "气",
          id: 2
        },
        {
          name: "噪声",
          id: 3
        },
        {
          name: "土壤、底泥、固废、污泥和生活垃圾",
          id: 4
        },
        {
          name: "样品制备",
          id: 5
        },
        {
          name: "小型分析仪器",
          id: 6
        },
        {
          name: "色谱仪",
          id: 7
        },
        {
          name: "光谱仪",
          id: 8
        },
        {
          name: "质谱仪",
          id: 9
        }
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: 10,
        state: 0
      },
      getId: null,
      succList: []
    };
  },
  created() {
    this.handleSearch();
  },
  methods: {
    sumitInstall(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const uploadFiles = this.$refs["uploadList"].uploadFiles;
          const files = uploadFiles.map(item => {
            return item.name;
          });
          const params = {
            id: this.getId,
            ...this.installForm,
            image1: this.succList[0] || "",
            image2: this.succList[1] || "",
            image3: this.succList[2] || "",
            image4: this.succList[3] || "",
            image5: this.succList[4] || ""
          };
          instrServer.installAcceptance(params).then(res => {
            if (res.code === 200) {
              this.$notify({
                title: "成功",
                message: res.message,
                type: "success"
              });
              this.handleSearch();
              this.approveVisible = false;
            } else {
              this.$notify({
                title: "失败",
                message: res.message,
                type: "error"
              });
              this.approveVisible = false;
            }
          });

          //   debugger;
          //   instrServer.addDeviceApply(this.purchaseForm).then((res) => {
          //     if (res.code === 200) {
          //       this.$notify({
          //         title: "成功",
          //         message: res.message,
          //         type: "success",
          //       });
          //       this.handleSearch();
          //       this.purchaseVisible = false;
          //     } else {
          //       this.$notify({
          //         title: "失败",
          //         message: res.message,
          //         type: "error",
          //       });
          //       this.purchaseVisible = false;
          //     }
          //   });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    deleteFile(file) {
      //  const val = this.$refs.uploadList
      let uploadFiles = this.$refs["uploadList"].uploadFiles;
      let index = uploadFiles.indexOf(file);
      uploadFiles.splice(index, 1);
      //   this.succList
      //   debugger;
    },
    handleExceed() {
      this.$message.warning("最多允许上传5张图片");
    },
    handleSuccess(res, file, fileList) {
      this.succList = fileList.map(item => {
        console.log(this.succList);
        return item.response.result[0];
      });
      //  debugger
    },
    changeLIst(file, fileList) {
      this.fileList = fileList;
      const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
      const whiteList = ["png", "jpg", "jpeg"];
      const isSuffix = whiteList.indexOf(fileSuffix.toLowerCase()) === -1;
      const isLt10M = file.size / 1024 / 1024 > 2;
      console.log("this.fileList:", this.fileList);
      if (isSuffix) {
        this.$message.error("上传文件只能是 png、jpg、jpeg格式");
        const currIdx = this.fileList.indexOf(file);
        this.fileList.splice(currIdx, 1);
        return;
      }
      if (isLt10M) {
        this.$message.error("上传文件大小不能超过 2MB");
        const currIdx = this.fileList.indexOf(file);
        this.fileList.splice(currIdx, 1);
        return;
      }
    },
    handleRemove(file) {
      console.log(file, this.fileList);
    },
    handlePreview(file) {
      console.log(file, this.fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },
    install(id) {
      this.getId = id;
      this.approveVisible = true;
      // 位置列表
      instrServer.roomList().then(res => {
        this.deptListRoomList = res.result;
        console.log(this.deptListRoomList);
        this.deptOptions = this.deptListRoomList;
        console.log(this.deptOptions);
      });
    },
    /** 转换数据结构 */
    normalizer(node) {
      if (node.childList && !node.childList.length) {
        delete node.childList;
      }
      return {
        id: node.id,
        label: node.name,
        children: node.childList
      };
    },
    changeId(e) {
      console.log(e);
      this.position = e.id;
      this.installForm.position = e.name;
      console.log(this.installForm.positionn);
    },
    handleSearch() {
      instrServer.getDeviceInstallList(this.searchForm).then(res => {
        this.tableData = res.result.records;
        this.total = res.result.total;
      });
    },

    dialogClose() {
      this.purchaseForm = {};
    }
  }
};
</script>

<style scoped lang="scss">
.clearfix {
  line-height: 40px;
  display: flex;
}
.install-title {
  display: flex;
  align-items: center;
  line-height: 30px;
  padding-left: 20px;
  color: #fff;
  background-color: #d7dae2;
  justify-content: flex-start;
  margin-bottom: 10px;
}
.delete {
  width: 10px;
  height: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
::v-deep .el-upload-list {
  width: 100px;
  display: flex;
  margin: 10px 10px;
}
::v-deep .el-upload-list > li {
  margin: 10px 10px;
}
::v-deep.el-upload-list__item {
  margin: 10px 10px;
}
::v-deep.el-upload-list--picture .el-upload-list__item {
  margin: 10px 10px !important;
}
.clearfix {
  line-height: 40px;
  display: flex;
}
.install-title {
  display: flex;
  align-items: center;
  line-height: 30px;
  padding-left: 20px;
  color: rgb(15, 14, 14);
  background-color: #f3f2f2;
  justify-content: flex-start;
  margin-bottom: 15px;
}
.delete {
  width: 10px;
  height: 10px;
  position: relative;
  top: -10px;
  cursor: pointer;
}
::v-deep .el-upload-list {
  display: flex;
  margin: 10px 10px;
}
::v-deep .el-upload-list > li {
  margin: 10px 10px;
}
::v-deep.el-upload-list__item {
  margin: 10px 10px;
}
::v-deep.el-upload-list--picture .el-upload-list__item {
  margin: 10px 10px !important;
}
.user-info-head {
  position: relative;
  display: inline-block;
  height: 120px;
}

::v-deep.avatar-upload-preview {
  width: 400px;
  border-radius: 0%;
  height: 400px;
  > img {
    transform: translateX(0);
  }
}
.user-info-head:hover:after {
  content: "+";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #eee;
  background: rgba(0, 0, 0, 0.5);
  font-size: 24px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  cursor: pointer;
  line-height: 110px;
  border-radius: 50%;
}

/deep/.upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

/deep/.el-dialog {
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 80%;
}

.cropper-wrapper {
  //height: calc(100vh - 50px);
  .pre-box {
    button {
      width: 100px;
      margin-top: 15px;
    }
  }
}

.crop-dialog {
  .cropper-content {
    padding: 0 40px;

    .cropper {
      width: 900px;
      height: 900px;
    }
  }

  .action-box {
    padding: 25px 40px 0 40px;
    display: flex;
    justify-content: center;

    button {
      width: 80px;
      margin-right: 15px;
    }
  }

  .dialog-footer {
    button {
      width: 100px;
    }
  }
}
</style>
